<template>
    <!-- 修改资料 -->
  
    <div>
      <el-form
        :model="form"
        label-position="right"
        ref="formRef"
        :rules="formRules"
      >
          <el-row :gutter="15">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="编号" required>
                <el-input v-model="form.number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="名称" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="运输方式" :required="true">
                <el-select
                  v-model="form.transportMode"
                  clearable
                  placeholder="请选择："
                >
                  <el-option
                    v-for="item in configData.transportModeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="计价方式" required>
                  <el-select
                  v-model="form.priceKind"
                  clearable
                  placeholder="请选择："
                >
                  <el-option
                    v-for="item in configData.priceKindList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="是否包邮" required>
                <el-switch v-model="form.freeShipping"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="默认运费" required>
                  <el-input-number v-model="form.freight"/>
              </el-form-item>
            </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="状态" prop="status">
                    <el-switch
                      v-model="form.status"
                      inline-prompt
                      active-value="normal"
                      inactive-value="disable"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <el-form-item label="备注">
                    <el-input v-model="form.remark"></el-input>
                  </el-form-item>
                </el-col>
          </el-row>
      </el-form>
      <div class="button-position">
        <el-button @click="updateVisible">取 消</el-button>
        <el-button type="primary" @click="updateFreight(formRef)">确 定</el-button>
      </div>
    </div>
  </template>
    
    
    <script setup>
  import { reactive, ref, onMounted } from "vue";
  import { ElNotification } from "element-plus";
  import Api from "@/api/model/mall";
  import tsSelect from "@/components/scSelect/index.vue";
  const emit = defineEmits(["updatetable"]);
  const props = defineProps({
    paramsData: {
      type: Object,
      defalut: {},
    },
  });
  
  // 添加用户数据的对象
  const form = ref({});
  const remark = ref();
  const configData = ref([]);
  const formRef = ref();
  onMounted(() => {
    getInit();
  });
  
  const updateVisible = () => {
    emit("updatetable");
  };
  
  const getInit = async () => {
    let res = await Api.freight.detail.post(props.paramsData);
    if (res.code == "200") {
      configData.value = res.configData;
      form.value = res.data;
    }
  };
  const restAddFormData = () => {
    formRef.value.resetFields();
  };
  
  // 上传
  const updateFreight = async (formRef) => {
    await formRef.validate((valid, fields) => {
      if (valid) {
        updateFreightData();
      }
    });
  };
  
  const updateFreightData = async () => {
    var params = {
      bean: form.value,
    };
  
    var res = await Api.freight.update.post(params);
    console.log(res);
    if (res.code == 200) {
      restAddFormData();
      ElNotification.success({
        title: "",
        message: "修改成功！",
        duration: 2000,
      });
      emit("updatetable", true);
    }
  };
  </script>
    
    <style scoped></style>
    
    